<template>
    <div class="personal-wrap">
        <div class="top-bg">
            <!-- 用户信息 -->
            <div class="user-box flex-column flex-center">
                <div class="avatar">
                    <el-image :src="userProfile.avatarUrl + '?param=200y200'">
                        <div
                            slot="placeholder"
                            class="image-slot "
                        >
                            <p>加载中<span class="dot">...</span></p>
                        </div>
                        <div
                            slot="error"
                            class="image-slot"
                        >
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <div
                        class="level flex-center "
                        v-show="level"
                    >
                        <i
                            class="iconfont icon-level"
                            :class="level"
                        ></i>
                    </div>
                </div>
                <p class="nickname">
                    {{ userProfile.nickname }}
                    <i
                        class="iconfont"
                        :class="gender"
                    ></i>
                </p>
                <div class="info">
                    <p>{{ age }}</p>
                    <p>{{ (regionProvince || {}).region }} - {{ regionCity }}</p>
                </div>
                <ul class="follow flex-between">
                    <li>
                        <p class="num">{{ userProfile.eventCount }}</p>
                        <p class="text">动态</p>
                    </li>
                    <li>
                        <p class="num">{{ userProfile.newFollows }}</p>
                        <p class="text">关注</p>
                    </li>
                    <li>
                        <p class="num">{{ userProfile.followeds }}</p>
                        <p class="text">粉丝</p>
                    </li>
                </ul>

            </div>
        </div>
        <div class="main ">
            <div class="left">
                <el-card class="left-card">
                    <div class="card-header flex-between">
                        <p class="flex-row">
                            听歌排行 <span></span>
                        </p>
                        <div class="tab flex-row">
                            <span
                                :class="type == 1 ? 'active' : ''"
                                @click="changeType(1)"
                            >最近一周</span>
                            <span class="line"></span>
                            <span
                                :class="type == 0 ? 'active' : ''"
                                @click="changeType(0)"
                            >所有时间</span>
                        </div>
                    </div>
                    <div class="list">

                        <artist-list
                            v-if="songs.length > 0"
                            :songs="songs"
                        />
                    </div>
                </el-card>
            </div>
            <div class="right">
                <el-card class="right-card">
                    <div class="card-header flex-row">
                        <span>我创建的歌单</span>
                    </div>
                    <div class="list">
                        <song-sheet :sheetList="myList"></song-sheet>

                    </div>
                </el-card>
                <el-card class="right-card">
                    <div class="card-header flex-row">
                        <span>我收藏的歌单</span>
                    </div>
                    <div class="list">
                        <song-sheet :sheetList="collectList"></song-sheet>

                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { createSong } from '@/model/song'
import ArtistList from '@/components/common/artistList/Index'
import songSheet from '@/components/common/songSheet/Index'
// 城市数据
import region from '../../utils/region';

export default {
    data() {
        return {
            userProfile: {},
            provinceName: '',
            cityName: '',
            type: 1,
            songs: [],
            myList: [],
            collectList: [],
        }
    },
    components: {
        ArtistList,
        songSheet,
    },
    computed: {
        // 设置歌手性别
        gender() {
            if (this.userProfile.gender > 0) {
                return this.userProfile.gender === 1
                    ? 'niceCRM_icon_nanxing man'
                    : 'niceCRM_icon_nvxing woman'
            } else {
                return ''
            }
        },
        // 年龄
        age() {
            return this.utils.getAstro(this.userProfile.birthday)
        },
        // 设置用户等级
        level() {
            if (this.userProfile.level > 0) {
                return 'nicelevel-' + this.userProfile.level
            } else {
                return ''
            }
        },
        // 获得省份
        regionProvince() {
            region.forEach(item => {
                if (item.code == (this.userProfile || {}).province) {
                    (this.userProfile || {}).province = item;
                }
            });
            return (this.userProfile || {}).province;
        },
        // 获得城市
        regionCity() {
            // 拿到省份数据
            let one = this.regionProvince || {}; // 此处必须加分号
            // 拿到市
            (one.regionEntitys || []).forEach(item => {
                if (item.code == (this.userProfile || {}).city) {
                    (this.userProfile || {}).city = item.region;
                }
            });
            return (this.userProfile || {}).city;
        },
        ...mapGetters(['userInfo',])

    },
    watch: {
        $route(newVal) {
            if (newVal.query.id) {
                this.getUserDetail(newVal.query.id)
            } else {
                this.getUserDetail(this.userInfo.userId)
            }

        }
    },
    created() {
        let userId = this.$route.query.id || this.$route.query.userId
        this.getUserDetail(userId)
    },
    methods: {
        // 获取个人信息
        async getUserDetail(userId) {
            const { data: res } = await this.$api.getUserDetail(userId)
            if (res.code !== 200) {
                return this.$message.error('获取个人信息失败！')
            }
            console.log(res);
            // this.setUserInfo(res.profile)
            this.userProfile = res.profile
            this.userProfile.level = res.level
            this.getUserRecord()
            this.getUserArtist()

        },
        // 修改一周数据或者全部
        changeType(type) {
            this.type = type
            this.getUserRecord()
        },
        // 获取用户播放记录
        async getUserRecord() {
            const { data: res } = await this.$api.getUserRecord(this.userProfile.userId, this.type)
            if (res.code !== 200) {
                return this.message.error('获取用户播放记录失败！');
            }
            // console.log(res);
            if (this.type == 1) {
                this.songs = this._normalizeSongs(res.weekData)
            } else {
                this.songs = this._normalizeSongs(res.allData)
            }
        },
        // 获取用户歌单
        async getUserArtist() {
            const { data: res } = await this.$api.getUserArtist(this.userProfile.userId)
            if (res.code !== 200) {
                return this.message.error('获取用户歌单失败！');
            }
            let list = res.playlist
            let myList = []
            let collectList = []
            list.map(item => {
                if (item.userId === this.userProfile.userId) {
                    myList.push(item)
                } else {
                    collectList.push(item)
                }
            })
            this.myList = myList
            this.collectList = collectList
        },
        // 处理歌曲
        _normalizeSongs(list) {
            let ret = []
            list.map(item => {
                item.song.playCount = item.playCount
                item.song.score = item.score
                if (item.song.id) {
                    ret.push(createSong(item.song))
                }
            })
            return ret
        }
    },
}
</script>

<style lang="less" scoped>
.personal-wrap {
    .top-bg {
        width: 100%;
        min-width: 1080px;
        height: 380px;
        background-image: url("../../assets/images/personal.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        .user-box {
            position: relative;
            top: 80px;
            .avatar {
                position: relative;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                overflow: hidden;
                .el-image {
                    border-radius: 50%;
                    border: 3px solid #fff;
                }
                .level {
                    width: 100%;
                    height: 25px;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(255, 255, 255, 0.8);
                    .icon-level {
                        font-size: 25px;
                        color: #fa2800;
                        margin-left: 8px;
                    }
                }
            }
            .nickname {
                color: #fff;
                font-size: 20px;
                font-weight: bold;
                margin: 15px 0;
                i {
                    font-size: 20px;
                    &.man {
                        color: #1f91f2;
                    }
                    &.woman {
                        color: #fc7265;
                    }
                }
            }
            .info {
                display: flex;
                p {
                    color: #fff;
                    font-size: 16px;
                    margin: 0 10px;
                }
            }
            .follow {
                width: 150px;
                color: #fff;
                font-size: 20px;
                text-align: center;
                margin: 20px;
                li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: #fff;
                    .num {
                        font-size: 24px;
                    }
                    .text {
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .main {
        display: flex;
        padding: 20px;
        .card-header {
            width: 240px;
            border-left: 3px solid#fa2800;
            height: 20px;
            padding-left: 10px;
            margin-bottom: 25px;
            font-weight: bold;
        }
        .left-card,
        .right-card {
            margin: 20px;
            padding: 20px 20px 0;
        }
        .left {
            width: 100%;
            min-width: 850px;
            .tab {
                span {
                    font-size: 12px;
                    cursor: pointer;
                    &.active {
                        color: #fa2800;
                    }
                }
                .line {
                    width: 1px;
                    height: 13px;
                    background: #999;
                    display: block;
                    margin: 0 10px;
                }
            }
        }
        .right-card {
            width: 405px;
            .list {
                width: 100%;
            }
        }
    }
}
</style>